<template>
  <div class="card-container">
    <div class="toolbar">
      <table-toolbar />
      <publish-bar />
    </div>
    <div class="content">
      <table-content />
    </div>
  </div>
</template>
<script setup>
import TableToolbar from './table-toolbar.vue'
import TableContent from './table-content.vue'
import PublishBar from './publish-bar.vue'
import { useProvideContextRegistry } from './provide-context.js'
useProvideContextRegistry()
</script>
<style lang="less" scoped>
.card-container {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  padding: 16px 22px 21px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  .table-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .content {
    flex: 1;
    overflow: hidden;
    margin-top: 16px;
  }
}
</style>
